<template>
 <div>
   <el-card style="max-width: 480px">
    <template #header>
      <div class="card-header" style="text-align: center">
        <span>注册页面</span>
      </div>
    </template>
    <div>
        <el-form  label-width="auto" style="max-width: 600px">
            <el-form-item label="昵称">
            <el-input v-model="user.nickName" />
            </el-form-item>
            <el-form-item label="用户名">
            <el-input v-model="user.loginName" />
            </el-form-item>
            <el-form-item label="密码">
            <el-input type="password" v-model="user.loginPwd" />
            </el-form-item>
            <el-form-item label="email">
               <el-input type="text" v-model="user.email" />
            </el-form-item>
        </el-form>
    </div>
    <template #footer>
      <div style="text-align: center">
            <el-button type="primary" @click="register">注册</el-button>
             <el-button>取消</el-button>
      </div>
    </template>
  </el-card>
   

    
  </div>
</template>

<script>
import axios from 'axios';
import {ref,reactive} from 'vue';
export default {
   setup(){
     //字段和方法混着写
     const user=reactive({
             nickName:'',
             loginName:'',
             loginPwd:'',
             email:''
     })
     const register=function(){
        axios.post("http://localhost:9090/my/ajax/reg",user)
        .then(function(resp){
               alert(resp.data.msg)
        });
      }
      return {
        user,register
      }
   }
}
</script>

<style>

</style>